<!DOCTYPE html>
<html class="x-admin-sm">

{include file="common/static" /}
{include file="common/resources" /}
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">房间动态</a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid" id="app">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">

                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="contrller">
                                        <option>房间状态</option>
                                        <option>支付宝</option>
                                        <option>微信</option>
                                        <option>货到付款</option></select>
                                </div>

                                <div class="layui-input-inline layui-show-xs-block">
                                    <input type="text" name="username" placeholder="请输入房间号" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                        <i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>

                            <div class="layui-row">

                                    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1"
                                         style="border: 1px solid blue;padding: 8px;margin: 5px;cursor:pointer"
                                         v-for='item in list' @click="move(item.id)" :id="item.id">

                                        <blockquote class="layui-elem-quote">{{item.room_num}}</blockquote>
                                        <h4>{{item.type_name}}</h4>
                                        <p>单价：{{item.price}}￥</p>
                                        <p>{{item.building}}:{{item.storey}}</p>

                                        <div v-if="item.status == '1'">
                                            <span class="layui-badge layui-bg-blue">空闲</span>
                                        </div>
                                        <div v-else-if="item.status == '2'">
                                            <span class="layui-badge layui-bg-blue">{{item.guest_name}}</span>
                                        </div>
                                        <div v-else-if="item.status == '3'">
                                            <span class="layui-badge layui-bg-orange">{{item.guest_name}}vip</span>
                                        </div>
                                        <div v-else>
                                            <span class="layui-badge layui-bg-blue">维修</span>
                                        </div>
                                </div>

                            </div>



                    </div>
                </div>
            </div>
        </div>
    </body>

<script>
    layui.use(['laydate', 'form'],
        function() {
            var laydate = layui.laydate;
        });

</script>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script >
    vm=new Vue({
        el:'#app',
        data:{
            list:[],
        },
        methods:{
            get_list:function(){
                _this = this;
                $.ajax({
                    type:"post",
                    url: "{:url('home/index/welcome')}",
                    data: {},
                    success: function(data){
                        console.log(data);
                        _this.list = data;
                    }});
            },
            move:function (id) {
                // $("#"+id).css("border","2px solid red");
                // alert(id);
            }
        },
        beforeMount:function(){
            this.get_list();
        }
    });

</script>

</html>